import {CCard} from "@/components/card"
import WaterTarget from "@/components/devCard/waterTarget"
import {DeviceStatusIcon, IconImg, SettingUtilIcon} from "@/components/images"
import {imagesUrl} from "@/utils/baseUrl"
import {devStatus2Color, paramStatus2Color} from "@/utils/common"
import {toHome, toHomeParamsHistory} from "@/utils/pageRedirect"
import {
	toAbnormal,
	toCollectRateSetting,
	toDevBaseInfo,
	toDevControll,
	toSetReport,
	toSettingDevLog,
	toSettingProductFiles,
	toSingleDevShareList,
	toStandardConfig,
	toVideoSurveillance,
	toAdditionConfig,
	toDevControll2,
	toDpdControl,
	toGJ004Switch,
	toUploadSwitchSetting,
	toWaterSupplyStationControl,
	toMeasureControl,
	toRainControl,
	toG1680AControl
} from "@/utils/pageRedirect"
import {View} from "@tarojs/components"
import Taro from "@tarojs/taro"

export const DevAnalyzeCard: React.FC<{
	accessData?: Setting.AccessData
}> = ({accessData}): JSX.Element => {
	return (
		<CCard
			style={{
				padding: "0",
				background: "#0342814d"
			}}
		>
			<View
				className="h-28 m-8 px-5 pl-5 pr-21 rounded-full inline-flex items-center"
				style={
					{
						// background: '#5f8fc6'
					}
				}
			>
				<IconImg
					imgName="device-circle-color"
					style={{
						width: "36rpx",
						height: "36rpx",
						marginRight: "14rpx"
					}}
				></IconImg>
				<View className="text-14 text-white">{accessData?.devName}</View>
			</View>
			<CCard
				style={{
					backgroundImage: `url(${imagesUrl + "water-wave.png"})`,
					backgroundSize: "100% 100rpx",
					backgroundRepeat: "no-repeat",
					backgroundPosition: "bottom"
				}}
			>
				{/* 水质指标 */}
				<WaterTarget
					value={accessData?.standRatio}
					text={accessData?.standRatioStatus}
					style={{
						width: "200rpx",
						height: "200rpx",
						margin: "48rpx auto 24rpx"
					}}
					textStyle={{
						fontSize: "24rpx"
					}}
					showText={false}
				></WaterTarget>
				{/* 状态及检测时间 */}
				<View className="w-full mb-18 flex justify-center items-center overflow-hidden">
					<DeviceStatusIcon
						status={accessData?.nowDevStatus || "---"}
						style={{
							width: "28rpx",
							height: "28rpx",
							marginRight: "14rpx"
						}}
					></DeviceStatusIcon>
					<View
						className="hanzi text-14 font-bold mr-25"
						style={{
							color: devStatus2Color(accessData?.nowDevStatus)
						}}
					>
						{accessData?.nowDevStatus || "---"}
					</View>
					<View className="h-20 text-14 text-xx_text">
						{`累计检测 ${accessData?.totalCheckHour || 0} 小时`}
					</View>
				</View>
				{/* 在线时间以及检测参数中异常数据占比 */}
				<View className="h-50 mb-18 mx-auto flex justify-center items-center">
					<View className="px-24">
						<View className="notHanzi text-center text-24 font-bold mb-4">
							{accessData?.onLineRatio ? accessData.onLineRatio + "%" : "---"}
						</View>
						<View className="text-center text-12 text-xx_text">设备在线占比</View>
					</View>
					<View className="w-1 h-18_24 bg-x_line"></View>
					<View className="px-24">
						<View className="notHanzi text-center text-24 font-bold mb-4">
							{accessData?.standRatioTimeRatio
								? accessData.standRatioTimeRatio + "%"
								: "---"}
						</View>
						<View className="text-center text-12 text-xx_text">监测正常占比</View>
					</View>
				</View>
			</CCard>
		</CCard>
	)
}

/* 异常卡片 */
export const DevAbnormalCard: React.FC<{
	devId?: string | number
	count?: number
}> = ({count, devId}): JSX.Element => {
	return (
		<View
			className="w-full"
			onClick={() => {
				devId && toAbnormal(devId)
			}}
		>
			<View className="w-full py-18 px-16 bg-white mt-24 rounded-12 flex justify-between items-center">
				<View className="text-14 font-bold">设备异常</View>

				{count ? (
					<View className="w-20 h-20 leading-20 text-center rounded-full bg-danger text-12 text-white truncate">
						{count > 99 ? <View className="text-10 text-white">99+</View> : count}
					</View>
				) : (
					// <View className="iconfont icon-youjiantou text-10 text-x_text"></View>
					<IconImg imgName="allowRight" width={24} height={26}></IconImg>
				)}
			</View>
		</View>
	)
}

/**
 * 设备功能按钮
 * @desc 注意有些功能需要判断是否是设备管理员
 * @param param0
 * @returns
 */
export const DevUtilCard: React.FC<{
	isManage: "是" | "否"
	devFun: Setting.DevFun
	devName: string
}> = ({devFun, devName, children, isManage}): JSX.Element => {
	// console.log("cs", devFun, devName, children, isManage)

	const toUtilPage = (funCode: string) => {
		// console.log("funCode", funCode)

		switch (funCode) {
			// 设备日志
			case "0005":
				toSettingDevLog(devFun.devId, devName)
				break

			// 产品资料
			case "0149":
				toSettingProductFiles(devFun.devId, devName)
				break

			// 基本信息
			case "0001":
				toDevBaseInfo({
					devId: devFun.devId,
					isManage
				})
				break

			// 分享设备
			case "0002":
				console.log("跳转分享传参isManage", isManage)

				toSingleDevShareList({
					devId: devFun.devId,
					devName: devName,
					isManage
				})
				break

			// 报警配置
			case "0148":
				toSetReport({
					devId: devFun.devId,
					isManage
				})
				break

			// 合格标准
			case "0075":
				toStandardConfig({
					devId: devFun.devId,
					isManage
				})
				break

			// 采集频率
			case "0009":
				toCollectRateSetting({
					devId: devFun.devId,
					isManage
				})
				break

			// 数据开关
			case "0064":
				toUploadSwitchSetting({
					devId: devFun.devId
				})
				break

			// 监控摄像
			case "0196":
				toVideoSurveillance()
				break

			// 功能控制
			case "0209":
				toDevControll({
					devId: devFun.devId,
					isManage
				})
				break

			// 附加设置
			case "0258":
				toAdditionConfig({
					devId: devFun.devId,
					isManage,
					devGId: devFun.devGId
				})
				break

			// 历史数据
			case "0250":
				toHomeParamsHistory(devFun.devId, devName)
				break

			// 空调控制
			case "0282":
				toDevControll2({
					devId: devFun.devId,
					isManage,
					devGId: devFun.devGId
				})
				break

			// DPD控制
			case "0300":
				toDpdControl({
					devGId: devFun.devGId
				})
				break

			// GJ004开关控制
			case "0303":
				toGJ004Switch({
					devId: devFun.devId,
					devGId: devFun.devGId
				})
				break

			// 水站控制
			case "0304":
				toWaterSupplyStationControl({
					devId: devFun.devId,
					devGId: devFun.devGId
				})
				break

			// 测量控制
			case "0364":
				toMeasureControl({
					devId: devFun.devId,
					devGId: devFun.devGId
				})
				break

			// 雨水控制
			case "0371":
				toRainControl({
					devId: devFun.devId,
					devGId: devFun.devGId
				})
				break

			// G1680A
			case "0384":
				toG1680AControl({
					devId: devFun.devId,
					devGId: devFun.devGId
				})
				break

			default:
				Taro.showToast({
					icon: "none",
					title: "暂未开放"
				})
				break
		}
	}
	return (
		<CCard onClick={() => toUtilPage(devFun.devFunCode)}>
			{children
				? children
				: [
						<View>
							<SettingUtilIcon code={devFun.devFunCode}></SettingUtilIcon>
						</View>,
						<View className="hanzi text-14 font-bold mb-2 truncate">
							{devFun.devFunName}
						</View>,
						<View className="hanzi text-14 text-xx_text">{devFun.devFunDesc}</View>
				  ]}
		</CCard>
	)
}
